<template>
    <div>
        <div class="m-header flex-box flex-ac flex-pj">
            <div class="flex-box flex-ac he-fv" @click="winclose">
                <div class="arrow_left_s arrow_left_i"></div>
            </div>
            <div class="flex-box flex-ac" @click="togTab">
                <h1 class="text">{{ title }}</h1>
                <div class="arrow_s" 
                :class="{
                    'arrow_up' : tabShow,
                    'arrow_down' : !tabShow,
                }"></div>
            </div>
            <div class="flex-box flex-ac he-fv" @click="openMenu">
                <div class="icon_menu"></div>
            </div>
        </div>
        
        <div v-show="tabShow" class="maskLayer" @click="closeTab()">
            <div class="flex-box flex-pa tx-c bg-c-wh padd-1">
                <div class="bjTab" :class="{
                    'check' : index == 0,
                    'check1' : index != 0
                }" @click="togBjTab(0, '冠亚和')">冠亚和</div>
                <div class="bjTab" :class="{
                    'check' : index == 1,
                    'check1' : index != 1
                }" @click="togBjTab(1, '1至5名')">1至5名</div>
                <div class="bjTab" :class="{
                    'check' : index == 2,
                    'check1' : index != 2
                }" @click="togBjTab(2, '6至10名')">6至10名</div>
            </div>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import Trans from '../../common/js/eventTrans'
export default {
    data () {
        return {
            title : '冠亚和',
            tabShow : false,
            index : 0
        }
    }, 
    methods: {
        togTab () {
            this.tabShow = !this.tabShow 
        },
        togBjTab (index, title) {
            // 刷新首页查询姓名方法
            Trans.$emit('togBjpk10Tab')
            this.index = index
            this.title = title
            this.$store.state.bjpk10Tab = title
            this.$store.commit('changeBjpk10Type', index)
        },
        closeTab () { 
            this.tabShow = !this.tabShow
        },
        openMenu () {
            // this.tabShow = !this.tabShow
        },
        winclose () {
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~common/stylus/variable" 
    .m-header
        background: #d41911
        position: relative
        height: 2.75rem
        text-align: center
        color: $color-w
        font-size: 0
    .arrow_left_s
        width: .75rem
        height: 1.25rem
        margin: 0 1rem 
        background-size: 100% 100%
    .arrow_s
        width: 1.25rem
        height: .75rem 
        background-size: 100% 100%
    .arrow_left_i
        background-image: url('../../common/image/arrow_left.png') 
    .arrow_up
        background-image: url('../../common/image/arrow_whiteup.png')
    .arrow_down 
        background-image: url('../../common/image/arrow_whitedown.png')
    .text
        display: inline-block
        vertical-align: top
        line-height: 2.75rem
        font-size: $font-size-18 
    .icon_menu
        width: 1.25rem; 
        height: 1.25rem; 
        margin: 0 .75rem;
        background-repeat: no-repeat
        background-size: 100% 100%
        background-image: url('../../common/image/menu.png')

    .maskLayer
        position : fixed
        top : 2.75rem
        bottom : 0
        width : 100%
        z-index : 100
        background : rgba(0, 0, 0, 0.6)
    .bjTab
        width : 30%
        line-height : 2.75rem
        background-size: 100% 100%
    .check
        background-image : url('../../common/image/check.png') 
    .check1 
        background-image : url('../../common/image/check1.png')
</style>